<!--
文件名: src/views/login/index.vue
功能: 管理员登录页面 (已修复模板错误)
-->
<template>
  <div class="login-container">
    <el-form
      ref="loginFormRef"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      @keyup.enter="handleLogin"
    >
      <h2 class="title">设备预约管理后台</h2>

      <!-- 用户名输入框 -->
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入管理员账号"
          :prefix-icon="User"
          size="large"
          clearable
        />
      </el-form-item>

      <!-- 密码输入框 -->
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          show-password
          :prefix-icon="Lock"
          size="large"
        />
      </el-form-item>

      <!-- 登录按钮 -->
      <el-form-item>
        <el-button
          type="primary"
          class="login-btn"
          :loading="loading"
          size="large"
          @click="handleLogin"
        >
          登 录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/modules/user'
import type { LoginFormData } from '@/api/types/auth'

// --- 状态与实例 ---

const router = useRouter()
const route = useRoute() // 用于获取 URL 中的 redirect 参数
const userStore = useUserStore()

const loginFormRef = ref<FormInstance>() // 表单实例
const loading = ref(false) // 加载状态

// --- 表单数据与验证规则 ---

// 登录表单数据
const loginForm = reactive<LoginFormData>({
  username: '', // 为方便测试，默认填充
  password: '', // 为方便测试，默认填充
})

// 表单验证规则
const loginRules = reactive<FormRules>({
  username: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
  ],
})

// --- 事件处理 ---

/**
 * @description 处理登录逻辑
 */
const handleLogin = async () => {
  // 1. 校验表单
  if (!loginFormRef.value) return
  const isValid = await loginFormRef.value.validate()
  if (!isValid) return

  // 2. 显示加载状态
  loading.value = true

  try {
    // 3. 调用 store 的 login action
    await userStore.login(loginForm)

    // 4. 登录成功，显示提示并跳转
    ElMessage.success('登录成功')

    // 路由跳转：
    // 如果 URL 中有 redirect 参数（比如从某个需要权限的页面被重定向过来），就跳回那个页面
    // 否则，默认跳转到根路径 '/'
    const redirect = route.query.redirect as string | undefined
    router.push(redirect || '/')
  } catch (error: any) {
    // 5. 错误处理：
    // 后端返回的错误信息通常在 error.response.data 中
    const errorMessage = error.response?.data?.detail || '登录失败，请检查账号或密码'
    ElMessage.error(errorMessage)
    console.error('登录失败:', error)
  } finally {
    // 6. 无论成功失败，都关闭加载状态
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

.login-form {
  width: 400px;
  padding: 40px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  color: #333;
}

.login-btn {
  width: 100%;
}
</style>
